<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-06-29 15:11:06
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-07 14:52:37
 * @FilePath: \cxl-h5\src\pages\report\newEnergy\Index.vue
-->
<template>
    <BaseReport
        :watermarkVisible="data.watermarkVisible"
        :go-top-visible="data.goTopVisible"
        :bottom-fn-visible="data.bottomFnVisible"
        :is-share="data.isShare"
        :from-case="data.fromCase"
        :report-type="data.reportType"
        :base-info="data.baseInfo"
        :status="data.reportQueryFail"
        :scoreLevel="data.scoreLevel"
        :reportExpire="data.reportExpire"
        :report-load="data.reportLoad"
        @createDownloadReport="data.startDownload"
        @go-top="data.goTop"
        @hide-download="data.hideDownload"
    >
        <template #body>
            <section class="report-box">
                <!-- 出险排查 -->
                <section class="check-ul">
                    <section
                        class="check-li"
                        v-for="item in data.checkList"
                        :key="item.label"
                        @click="data.onSkipAnchor(item.value ? item.targetEle : '')"
                    >
                        <span><img :src="item.icon" alt="" /></span>
                        <span>{{ item.label }}</span>
                        <p v-if="item.value">{{ item.value }}项异常</p>
                    </section>
                </section>
                <section
                    :class="[index !== 0 ? 'block' : '', item.blockClassName]"
                    v-for="(item, index) in data.columnArray"
                    :key="item.name"
                >
                    <section class="head" @click="data.toggle(index)" v-if="index !== 0">
                        <span>
                            {{ item.name }}
                            <span
                                v-if="item.icon"
                                class="iconfont icon-bangzhu"
                                @click.stop="data.onVisibleScoreExplainDialog('show')"
                            >
                            </span>
                        </span>
                        <span v-if="item.hint">{{ item.hint }}</span>
                        <span v-if="item.abnormal" :class="item.abnormalCount > 0 ? 'active' : ''">
                            <template v-if="item.abnormalCount">
                                <i>{{ item.abnormalCount }}</i>
                            </template>
                            <template v-else>0</template>
                            项异常
                        </span>
                    </section>
                    <section :class="['body', item.bodyClassName]" v-show="item.spread" v-if="index !== 0">
                        <!-- 出险排查 -->

                        <!-- 电池健康度评分 -->
                        <template v-if="index === 1">
                            <section class="score-container">
                                <section class="score-li" v-for="item in data.score" :key="item.name">
                                    <span>{{ item.name }}</span>
                                    <span>
                                        <i :class="'active_' + item.label" :style="{ width: item.value + '%' }">{{
                                            item.value
                                        }}</i>
                                    </span>
                                    <span>{{ data.scoreHealthLevel[item.label] }}</span>
                                </section>
                            </section>
                        </template>
                        <!-- 电池静态数据 -->
                        <template v-else-if="index === 2">
                            <section class="endurance-container"></section>
                            <section class="endurance">
                                <section class="describe">
                                    当前工况参考续航里程下降
                                    <i>{{ data.declineRatio }}%</i>
                                </section>
                                <InformationVue
                                    :keys="BATTERY_STATIC_DATA"
                                    :data="data.BATTERY_STATIC_DATA"
                                ></InformationVue>
                            </section>
                        </template>
                        <!-- 充放电数据 -->
                        <template v-else-if="index === 3">
                            <InformationVue
                                :keys="CHARGE_DISCHARGE_DATA"
                                :data="data.CHARGE_DISCHARGE_DATA"
                            ></InformationVue>
                        </template>
                        <!-- 行驶数据 -->
                        <template v-else-if="index === 4">
                            <InformationVue :keys="RUN_DATA" :data="data.RUN_DATA"></InformationVue>
                        </template>
                        <!-- 电池安全分析 -->
                        <template v-else-if="index === 5">
                            <InformationVue :keys="BATTERY_SAFE" :data="data.BATTERY_SAFE"></InformationVue>
                        </template>
                        <!-- 疑似行为检查 -->
                        <template v-else-if="index === 6">
                            <InformationVue :keys="SUSPECTED_BEHAVIOR" :data="data.SUSPECTED_BEHAVIOR"></InformationVue>
                        </template>
                    </section>
                </section>
            </section>
            <!--  -->
            <Explain
                :visible="data.scoreExplainDialog.visible"
                title="评分说明"
                @hide="data.onVisibleScoreExplainDialog('hide')"
            >
                <template #content>
                    <section class="battery-score">
                        <p>分值表示该电池的抗压能力、电容损耗程度、电池循环寿命、电池组安全性能。</p>
                        <span><i>[90-100]</i>分表示性能较好</span>
                        <span><i>[80-90]</i>分表示性能一般</span>
                        <span><i>[65-80]</i>分表示性能较差</span>
                        <span><i>[低于65]</i>分表示性能差</span>
                    </section>
                </template>
            </Explain>
        </template>
    </BaseReport>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { NewEnergy } from '.'
import BaseReport from '../base/Index.vue'
import InformationVue from '../base/Information.vue'
import { BATTERY_STATIC_DATA, CHARGE_DISCHARGE_DATA, RUN_DATA, BATTERY_SAFE, SUSPECTED_BEHAVIOR } from '@/utils/config'
import Explain from '../base/Explain.vue'

const data = reactive(new NewEnergy())
</script>
<style scoped lang="scss">
.block {
    box-sizing: border-box;
    border-radius: var(--cxl-size-6);
    background-color: var(--cxl-color-white);
    padding: 0 var(--cxl-size-16);
    margin-top: var(--cxl-size-10);
}

.battery-score {
    p {
        font-size: var(--cxl-size-16);
        margin: var(--cxl-size-24) 0;
    }
    span {
        font-size: var(--cxl-size-16);
        margin-top: var(--cxl-size-14);
        display: block;
        i {
            color: var(--cxl-color-primary);
        }
    }
}

.check-ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--cxl-color-white);
    border-radius: 0 var(--cxl-size-6) var(--cxl-size-6) 0;
    padding: 0 var(--cxl-size-16) var(--cxl-size-26) var(--cxl-size-16);
    box-sizing: border-box;
    .check-li {
        margin-top: var(--cxl-size-20);
        position: relative;
        //width: 25%; //产品说的文字间距要一致，所以把宽度去掉
        text-align: center;
        img {
            display: block;
            width: var(--cxl-size-24);
            margin: var(--cxl-size-8) auto;
        }
        span {
            font-size: var(--cxl-size-15);
        }
        p {
            position: absolute;
            top: calc(0% - var(--cxl-size-10));
            left: 20%;
            line-height: var(--cxl-size-18);
            border-radius: 0 var(--cxl-size-6) 0 var(--cxl-size-10);
            background-color: var(--cxl-color-ff5448);
            font-size: var(--cxl-size-12);
            padding: 0 var(--cxl-size-6);
            color: var(--cxl-color-white);
        }
    }
}

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: var(--cxl-size-14) 0;
    span {
        &:nth-child(1) {
            font-size: var(--cxl-size-16);
            font-weight: 600;
            > span {
                color: var(--cxl-color-primary);
            }
        }
        &:nth-child(2) {
            font-size: var(--cxl-size-13);
            color: var(--cxl-color-999999);
            i {
                font-size: var(--cxl-size-14);
                color: var(--cxl-color-ff5448);
            }
            &.active {
                color: var(--cxl-color-ff5448);
            }
        }
    }
}
.body {
    border-top: 1px solid var(--cxl-color-f0f0f0);
    box-sizing: border-box;
    padding: var(--cxl-size-8) 0 var(--cxl-size-16) 0;
}
.endurance {
    .describe {
        text-align: center;
        font-size: var(--cxl-size-15);
        color: var(--cxl-color-333333);
        padding-bottom: var(--cxl-size-16);
        i {
            color: var(--cxl-color-primary);
        }
    }
}

.score-container {
    box-sizing: border-box;
    .score-li {
        align-items: center;
        display: flex;
        justify-content: space-around;
        font-size: var(--cxl-size-15);
        margin: var(--cxl-size-10) 0;
        span {
            &:nth-child(1) {
                width: 26%;
                // color: var(--cxl-color-333333);
            }
            &:nth-child(2) {
                width: calc(100% - 26% - var(--cxl-size-40) - var(--cxl-size-20));
                background-color: var(--cxl-color-EFEFEF);
                height: var(--cxl-size-12);
                border-radius: var(--cxl-size-6);
                overflow: hidden;
                position: relative;
                i {
                    display: block;
                    height: 100%;
                    line-height: var(--cxl-size-12);
                    background-color: var(--cxl-color-primary);
                    color: var(--cxl-color-white);
                    font-size: var(--cxl-size-12);
                    border-radius: 0 var(--cxl-size-6) var(--cxl-size-6) 0;
                    text-align: right;
                    box-sizing: border-box;
                    padding: 0 var(--cxl-size-10) 0 0;
                    &.active_0 {
                        background-color: var(--cxl-color-primary);
                    }
                    &.active_1 {
                        background-color: var(--cxl-color-368AF7);
                    }
                    &.active_2 {
                        background-color: var(--cxl-color-F59A23);
                    }
                    &.active_3 {
                        background-color: var(--cxl-color-ff5448);
                    }
                }
            }
            &:nth-child(3) {
                width: var(--cxl-size-40);
                // color: var(--cxl-color-333333);
                text-align: right;
            }
        }
    }
}
</style>
